<template>
    <div class="publish">
        <!-- 发布商品 -->
        <div class="publish-one">
            <!-- 发布商品标题 -->
            <h2 class="my-big-font">发布商品</h2>
            <!-- 发布商品内容 -->
            <div class="publish-one-content">
                <span>发布流程：选择商品分类 → 输入商品基本信息 → 发布商品</span>
            </div>
        </div>
        <!-- 商品分类 -->
        <div class="publish-classify">
            <!-- 商品分类标题 -->
            <h2 class="my-big-font">选择商品分类</h2>
            <!-- 商品分类内容 -->
            <div class="classify-content">
                <p style="color:#666">分类</p>
                <el-select @change="getOrderedData" v-model="classifyValue" placeholder="全部" clearable>
                    <el-option v-for="item in classifyOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                </el-select>
            </div>
        </div>
        <!-- 商品基本信息 -->
        <div class="publish-foundation">
            <!-- 标题 -->
            <h2 class="my-big-font">商品基本信息</h2>
            <div class="foundation-content">
                <p style="color:#666">品牌</p>
                <div class="foundation-select">
                    <el-select @change="getShopTypesValue" v-model="foundationValue" placeholder="请选择品牌名称" clearable>
                        <el-option v-for="item in foundationOptions"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
            <div class="foundation-content">
                <p style="color:#666;">商品类别</p>
                <div class="foundation-select">
                    <el-select @change="getOrderedData" v-model="shopTypeValue" placeholder="请选择商品类别名称" clearable>
                    <el-option v-for="item in shopTypes"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                    </el-select>
                </div>
            </div>
        </div>
        <!-- 添加商品 -->
        <div class="publish-add">
            <h2 class="my-big-font">添加商品</h2>
            <div class="add-content">
                <div class="tableBox">
                    <table style="width: 100%;" class="tableone">
                        <thead>
                            <tr class="titleTr">
                                <td align="center">
                                    <span class="checkbox" @click="checkedAllClick" :class="{activeAll:checkedAllNum}"><img src="../assets/img/index/login-correct.png" alt=""></span>
                                </td>
                                <th class="title" colspan="7" >
                                    <div>
                                        <span>全选 (共{{addData.length}}条产品)</span>
                                    </div>
                                   <!-- <span style="color:rgba(107, 90, 253, 1);" @click="addDataAllFunction">批量添加</span> -->
                                </th>
                            </tr>
                            <tr>
                                <th></th>
                                <th>产品编号</th>
                                <th class="width-name">产品名称(类型)</th>
                                <th>规格</th>
                                <th>原价(元)</th>
                                <th>供货价(元)</th>
                                <th>状态</th>
                                <th width='80px'></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="p,i of addData" :key="i">
                                <td align="center">
                                    <span class="checkbox checkboxOne" @click="checkedOneClick(p.id,i)"><img src="../assets/img/index/login-correct.png" alt=""></span>
                                </td>
                                <td>{{p.goodsID}}</td>
                                <td class="width-name">{{p.goodsName}}</td>
                                <td>{{p.goodsParvalue}}</td>
                                <td>{{p.goodsParvalue}}</td>
                                <td>{{p.purchasePrice}}</td>
                                <td>
                                    {{ p.type==1?'已加购':'未加购'}}
                                </td>
                                <td>
                                    <p style="color:rgba(107, 90, 253, 1);" v-if="p.type==0" class="add" @click="addDataFunction(p.goodsID,p.goodsName,p.goodsParvalue,p.purchasePrice)">添加</p>
                                    <p style="color:#ddd" v-else class="add">添加</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
                <!-- 已订购 -->
                <div class="tableBox">
                    <table style="width: 100%;">
                        <thead>
                            <tr class="titleTr">
                                <td align="center">
                                    <span class="checkbox" @click="checkedAllClickT" :class="{activeAll:checkedAllNum2}"><img src="../assets/img/index/login-correct.png" alt=""></span>
                                </td>
                                <th class="title" colspan="11" >
                                    <div>
                                        <span>全选 (已订购{{productNumVip}}条产品)</span>
                                    </div>
                                </th>
                            </tr>
                            <tr>
                                <th width='30px'></th>
                                <th>产品编号</th>
                                <th class="width-name">产品名称</th>
                                <th>规格</th>
                                <th>原价</th>
                                <th>供货价</th>
                                <th>安卓现价</th>
                                <th>苹果现价</th>
                                <th>苹果id</th>
                                <th>保护价</th>
                                <th>产品说明</th>
                                <th width='90px'></th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="p,i of orderedDatas" :key="i">
                                <td align="center">
                                    <span class="checkbox checkboxOne2" @click="checkedOneClickT(p.id,i)"><img src="../assets/img/index/login-correct.png" alt=""></span>
                                </td>
                                <td>{{p.goodsId}}</td>
                                <td class="width-name">
                                    <textarea class="explains" v-model="p.name"></textarea>
                                </td>
                                <td class="explains-box">
                                  <el-select class="explains" v-model="p.specsId">
                                    <el-option v-for="item in specsDatas"  :key="item.id"  :label="item.name"  :value="item.id"></el-option>
                                  </el-select>
                                </td>
                                <td>{{p.originalCost}}</td>
                                <td>{{p.supplyCost}}</td>
                                <td class="explains-box">
                                    <textarea class="explains" v-model="p.goodsparvalue"></textarea>
                                </td>
                                <td class="explains-box">
                                    <textarea class="explains" v-model="p.apGoodsparvalue"></textarea>
                                </td>
                                <td class="explains-box">
                                    <textarea class="explains" v-model="p.apProductCode"></textarea>
                                </td>
                                <td class="explains-box">
                                    <textarea class="explains" v-model="p.protectCost"></textarea>
                                </td>
                                <td class="explains-box">
                                    <textarea class="explains" v-model="p.explains"></textarea>
                                </td>
                                <td style="color:rgba(107, 90, 253, 1);">
                                    <p class="add" @click="removeDataFunction(p.id)">移除</p>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <div class="publish-image">
            <h2 class="my-big-font">商品图片</h2>
            <div class="image-content">
              <el-upload
                  class="upload-demo"
                  action="uploadurl"
                    list-type="picture-card"
                  :on-preview="handlePreview"
                  :on-remove="handleRemove"
                  :before-remove="beforeRemove"
                multiple
                  :limit="1"
                  :on-exceed="handleExceed"
                  :before-upload="beforeUpload"
                  :http-request="uploadHttp"
                  :file-list="fileList">
                    <i class="el-icon-plus"></i>
                <!-- <el-button size="small" type="primary">点击上传</el-button> -->
                <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
              </el-upload>
            </div>
        </div>
        <div class="publish-shelves">
            <div class="isshelves">
                <h2 class="my-big-font">是否上架</h2>
                <div class="isshelves-bottom">
                    <el-switch  v-model="shelvesValue" active-color="RGB(247, 133, 55)"  inactive-color="RGB(225, 225, 225)"></el-switch>
                    <span>上架</span>
                </div>
            </div>
            <div class="timeshelves">
                <h2 v-if="shelvesValue" class="my-big-font">上架时间</h2>
                <h2 v-else class="my-big-font">下架时间</h2>
                <div class="block">
                    <el-date-picker  v-model="dateValue"  type="datetime"  placeholder="选择日期时间" :picker-options="pickerOptions"></el-date-picker>
                </div>
            </div>
        </div>
        <div class="publish-btn">
            <span @click="submitFunction">发布</span>
            <span @click="cancel">取消</span>
        </div>
    </div>
</template>
<script>
export default {
    data(){
        return{
            dx:false,
            productNumVip:'',
            checkedAllNum:'',//全选状态
            activeOneNum:'',//被选择的状态
            checkedIdArr:[],//被选择的id数组
            checkedAllNum2:'',//全选状态
            activeOneNum2:'',//被选择的状态
            checkedIdArr2:[],//被选择的id数组
            //商品分类数据
            classifyOptions: [],
            fileList:[],
            classifyValue: '',
            //品牌名称
            foundationOptions: [],
            foundationValue: '',
            //商品类别名称
            shopTypes: [
                {
                    id: '',
                    name: ''
                }
            ],
            shopTypeValue: '',
            //添加商品
            addData: [
                {
                    GoodsID:'',
                    GoodsName: '',
                    GoodsParvalue:' ',
                    PurchasePrice:''
                }
            ],
            //已订购商品
            orderedDatas: [
                {
                    id:'',
                    categoryId:'',
                    pid:'',
                    state:'',
                    purchasePrice:'',
                    goodsId:'',
                    file:'',
                    specsId:'',
                    groundTime:'',
                    name: '',
                    specsName:'',
                    originalCost:'',
                    supplyCost:'',
                    apGoodsparvalue:'',
                    apProductCode:'',
                    goodsparvalue:'',
                    protectCost:'',
                    explains:''
                }
            ],
            //已订购商品
            orderedData:
              {
                id:'',
                categoryId:'',
                pid:'',
                state:'',
                purchasePrice:'',
                goodsId:'',
                file:'',
                specsId:'',
                groundTime:'',
                name: '',
                specsName:'',
                originalCost:'',
                supplyCost:'',
                goodsparvalue:'',
                apGoodsparvalue:'',
                apProductCode:'',
                protectCost:'',
                explains:''
              },
            //所有商品规格
            specsDatas:'',
            //是否上架
            shelvesValue:true,
            // 上架时间
            dateValue: '',
            //上传图片
            actionUrl:'',
            fileUpUrl:'',
            dataList: "",
            VipShopEntity:'',
            pickerOptions:{
                disabledDate(time){
                    return time.getTime() < (Date.now()-(24 * 60 * 60 * 1000));
                }
            },
            uid:''
        }
    },
    mounted(){
        this.uid= sessionStorage.getItem('uid')
        this.getClassifyOptions()
        this.getFoundationOptions()
        this.getAddData()
        this.getproductNumVip()
        //查询规格
        this.getSpecs()
        //this.getClassifyOptions()
        //this.getClassifyOptions()
        //监听
        // window.addEventListener('resize', () => {
        //     var width=document.documentElement.scrollWidth
        //     var ele=document.querySelectorAll('.tableBox')
        //     if(width<1260){
        //         ele[0].classList.add('tableBoxS')
        //         ele[1].classList.add('tableBoxS')
        //     }else if(width>=1260){
        //         for(var n=0;n<ele[0].classList.length;n++){
        //             if(ele[0].classList[n]=='tableBoxS'){
        //                 ele[0].classList.remove('tableBoxS')
        //                 ele[1].classList.remove('tableBoxS')
        //             }
        //         }
        //     }
        // })
    },
    methods:{
        
        getproductNumVip(){
            this.axios.post('/recharge/sys/vipshop/productNum').then(res=>{
                this.productNumVip=res.data.data
            })
        },
        //获取选择商品分类数据
        getClassifyOptions(){
            this.axios.post('/recharge/sys/category/list').then(res=>{
                this.classifyOptions=res.data.data
            })
        },
        //获取品牌名称
        getFoundationOptions(){
            this.axios.post('/recharge/sys/vipshop/pnameList?categoryId='+this.classifyValue).then(res=>{
                this.foundationOptions=res.data.data
            })
        },
        //获取商品类别名称
        getShopTypesValue(){
            this.axios.get('/recharge/sys/vipshop/getPrice?id='+this.foundationValue).then(res=>{
                //console.log(res.data.data)
                this.shopTypeValue=''
                this.shopTypes=res.data.data
            })
        },
        //获取产品列表
        getAddData(){
            this.axios.get('/recharge/vip/test').then(res=>{
                //console.log(res.data.data)
                this.addData=res.data.data
            })
        },
        //获取产品订购列表
        getOrderedData(){
            this.getFoundationOptions()
            this.axios.post('/recharge/sys/vipshop/shopList?categoryId='+this.classifyValue+'&pid='+this.shopTypeValue).then(res=>{
                this.orderedDatas=res.data.data
            })
        },
        //获取所有商品规格
        getSpecs(){
            this.axios.post('/recharge/sys/specs/getAll').then(res=>{
              this.specsDatas = res.data.data
            })
        },
        // 批量添加商品
        addDataAllFunction(){
            var json = {};
            for(var i=0;i<this.checkedIdArr.length;i++){
                json[i]=this.checkedIdArr[i];
            }
            this.axios.get('',json).then(res=>{

            })
        },
        // 单个添加商品
        addDataFunction(GoodsID,GoodsName,GoodsParvalue,PurchasePrice){
            if(this.classifyValue==''){
                this.$alert('请选择商品分类')
                return
            }
            if(this.foundationValue==''){
                this.$alert('请选择品牌')
                return
            }
            if(this.shopTypeValue==''){
                this.$alert('请选择商品类别')
                return
            }
            if(this.checkedIdArr.length==0){
                this.$alert('请选择数据后再操作', '提示', {
                    confirmButtonText: '确定',
                });
                return
            }
            this.orderedData.goodsId= GoodsID;
            this.orderedData.name= GoodsName;
            this.orderedData.originalCost= GoodsParvalue;
            this.orderedData.purchasePrice= PurchasePrice;
            this.orderedData.supplyCost= PurchasePrice;
            this.orderedData.categoryId= this.classifyValue;
            this.orderedData.pid= this.shopTypeValue;
            if(this.shelvesValue){
               this.orderedData.state=1
            }else {
               this.orderedData.state=0
            }
            this.orderedData.groundTime= this.dateValue;
            this.$confirm('是否添加该商品?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '添加成功!'
                });
                this.axios.post('/recharge/sys/vipshop/save',this.orderedData).then(res=>{
                    this.$alert(res.data.message)
                    this.getOrderedData()
                    this.getAddData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消添加'
                });          
            });
        },
        // 批量移除商品
        removeDataAllFunction(){
            var json = {};
            for(var i=0;i<this.checkedIdArr2.length;i++){
                json[i]=this.checkedIdArr2[i];
            }
            this.axios.get('',json).then(res=>{

            })
        },
        // 单个移除商品
        removeDataFunction(id){
            if(this.checkedIdArr2.length==0){
                this.$alert('请选择数据后再操作', '提示', {
                    confirmButtonText: '确定',
                });
                return
            }
            this.$confirm('此操作将移除该产品, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                this.axios.post('/recharge/sys/vipshop/delete?id='+id +'&userid='+this.uid).then(res=>{
                    this.$alert("商品移除成功")
                    this.getOrderedData()
                    this.getAddData()
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消移除'
                });          
            });
            
        },
        //提交
        submitFunction(){
            if(this.orderedDatas){
              if(this.classifyValue==''){
                this.$alert('请选择商品分类')
                return
              }else if(this.foundationValue==''){
                this.$alert('请选择品牌')
                return
              }
              else if(this.dateValue==''){
                this.$alert('请选择上架时间')
                return
              }
              for(var i=0;i<this.orderedDatas.length;i++){
                this.orderedDatas[i].file=this.fileUpUrl;
                this.orderedDatas[i].groundTime=(new Date(this.dateValue)).getTime() / 1000;
                if(this.shelvesValue){
                  this.orderedDatas[i].state=1
                }else {
                  this.orderedDatas[i].state=0
                }
              }
              this.orderedDatas.forEach(e=>{
                if(e.apGoodsparvalue==''){
                    this.$alert('请填写苹果现价')
                    return
                }else if(e.apProductCode==''){
                    this.$alert('请填写苹果id')
                    return
                }
                else if(e.goodsparvalue==''){
                    this.$alert('请填写安卓现价')
                    return
                }
                else if(e.protectCost==''){
                    this.$alert('请填写保护价')
                    return
                }
              })
              this.axios.post('/recharge/sys/vipshop/saveList?userid='+this.uid,this.orderedDatas).then(res=>{
                this.$alert("商品发布成功")
                this.$router.push('/index/management')
              })
            }
        },
        // 取消
        cancel(){
            this.$router.push('/index')
            window.location.reload()
        },
        //删除图片
        handleRemove(file, fileList) {
            console.log('file', file);
            console.log('fileList', fileList);
        },
        // 保存图片列表
   /*     change(file) {
          console.log(file)
          console.log(this.file)
          let formData = new FormData();
          formData.append("file",file)
          var configs = {
            headers:{'Content-Type':'multipart/form-data'}
          };
          const instance=this.axios.create({
            withCredentials: true
          })
        //  forms.append('file',file.target.files[0])
          this.axios.post('/recharge/upload/file',formData,configs).then(res=>{
            console.log("----"+res.data)
            this.fileUpUrl = res.data.data
          })
        },*/

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePreview(file) {
        console.log(file);
      },
      handleExceed(files, fileList) {
        console.log(files)
        this.$message.warning("只能上传一个文件，请先删除，再上传新文件！");
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${ file.name }？`);
      },
      beforeUpload(file){
        const isLt2M = file.size / 1024 / 1024 < 2;
        if (!isLt2M) {
          this.common.errorTip('上传文件大小不能超过 2MB!');
        }
        return isLt2M;
      },
    uploadHttp(params){
        var  formData = new FormData();
        formData.append('file', params.file);
        this.axios.post('/recharge/upload/file', formData, { headers: { 'content-Type': 'multipart/form-data'} })
            .then(res=> {
            this.fileUpUrl = res.data.data
            })
    },

        /*change(file, fileList) {
          var arr = [];
          // 只上传一个-----
          if (fileList.length > 1) {
            fileList.splice(0, 1);
          }
          // 只上传一个-----
          console.log('fileList',fileList)
          fileList.forEach((item) => {
            arr.push(item.raw);
          });
          this.dataList = arr;
          console.log('this.dataList',this.dataList)
        },*/
        //全选
        checkedAllClick(){
            var ele=document.querySelectorAll('.checkboxOne')
            this.checkedAllNum=!this.checkedAllNum
            this.checkedIdArr=[]
            if(this.checkedAllNum){
                this.addData.forEach(e => {
                    this.checkedIdArr.push(e.id)
                    console.log(this.checkedIdArr)
                });
                ele.forEach(e => {
                    e.classList.add( "activeOne");
                });
            }else{
                ele.forEach(e => {
                    e.classList.remove( "activeOne");
                });
            }
            console.log(11111111,this.checkedIdArr)
        },
        //单选
        checkedOneClick(id,i){
            var mmm=0
            var ele=document.querySelectorAll('.checkboxOne')
            for(var n=0;n<this.checkedIdArr.length;n++){
                if(this.checkedIdArr[n]==id){
                    mmm=1
                    this.checkedIdArr.splice(n, 1);
                    ele[i].classList.remove( "activeOne");
                }
            }
            if(mmm!=1){
                this.checkedIdArr.push(id)
                ele[i].classList.add( "activeOne");
            }
            this.checkedIsAll()
        },
        //检查是否全选
        checkedIsAll(){
            if(this.checkedIdArr.length==this.addData.length){
                this.checkedAllNum=true
            }else{
                this.checkedAllNum=false
            }
            console.log(222222222,this.checkedIdArr)
        },
        //表二-全选
        checkedAllClickT(){
            var ele=document.querySelectorAll('.checkboxOne2')
            this.checkedAllNum2=!this.checkedAllNum2
            this.checkedIdArr2=[]
            if(this.checkedAllNum2){
                this.orderedDatas.forEach(e => {
                    this.checkedIdArr2.push(e.id)
                    console.log(this.checkedIdArr2)
                });
                ele.forEach(e => {
                    e.classList.add( "activeOne");
                });
            }else{
                ele.forEach(e => {
                    e.classList.remove( "activeOne");
                });
            }
            console.log(11111111,this.checkedIdArr2)
        },
        //表二-单选
        checkedOneClickT(id,i){
            console.log(id,i)
            var mmm=0
            var ele=document.querySelectorAll('.checkboxOne2')
            for(var n=0;n<this.checkedIdArr2.length;n++){
                if(this.checkedIdArr2[n]==id){
                    mmm=1
                    this.checkedIdArr2.splice(n, 1);
                    ele[i].classList.remove( "activeOne");
                }
            }
            if(mmm!=1){
                this.checkedIdArr2.push(id)
                ele[i].classList.add( "activeOne");
            }
            this.checkedIsAllT()
        },
        //表二-检查是否全选
        checkedIsAllT(){
            if(this.checkedIdArr2.length==this.orderedDatas.length){
                this.checkedAllNum2=true
            }else{
                this.checkedAllNum2=false
            }
        },
        //处理时间戳
        format(shijianchuo) {
            if(shijianchuo){
                var time = new Date(parseInt(shijianchuo)*1000);
                var y = time.getFullYear();
                var m = time.getMonth() + 1;
                var d = time.getDate();
                var h = time.getHours();
                var f = time.getMinutes();
                var s = time.getSeconds();
                //想要什么格式可以自己改
                // return y + '-' + this.add0(m) + '-' + this.add0(d) +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
                return y + '-' + m + '-' + d +" "+ this.add0(h)+':'+this.add0(f)+':'+this.add0(s);
            }
        },
        //小于10的时候，前边加0（08：08：12）
        add0(m) {
            return m < 10 ? '0' + m : m
        },
    },
    watch:{
        classifyValue(){
            this.foundationValue=''
            this.shopTypeValue=''
        }
    }
}
</script>

<style scoped>
.publish{
    padding: 30px 82px 50px 30px;
    background: #fff;
    margin: 10px 0 0 10px;
    color: #333333;
}
.publish-one h2{
    padding-top: 0;
}
/* 发布商品 */
.publish-one-content{
    color: #71709E;
    font-size: 16px;
    height: 50px;
    line-height: 50px;
    background: #F6F6F6;
    border-radius: 2px;
    padding-left: 10px;
}
/* 基本信息 */
.basic-information{
    display: flex;
    align-items: center;
    justify-content: space-between;
}
/* 商品分类 */
.el-select{
    width: 300px;
    /* margin-top: 20px; */
}
/* 商品基本信息 */
.foundation-content,.classify-content{
    display: flex;
    align-items: center;
    margin-top: 20px;
}
.foundation-content>p,.classify-content>p{
    /* width: 70px; */
    margin-right: 10px;
}
.foundation-select {
    display: flex;
}
</style>
<style scoped>
/* 添加商品 */
.explains-box{
    padding: 0;
    min-width: 40px;
}
.explains11{
    /* width: 120px; */
}
.explains{
    width: 98%;
    margin: 0 auto;
    height:30px;
    border-radius: 3px;
}
.add-content{
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
}
.tableBox{
    width: 49%;
    width: 100%;
    margin-bottom: 40px;
    max-height: 460px;
    overflow: auto;
    border: .5px solid #eee;
    border-right: 0;
    border-top: 0;
}
.tableBoxS{
    width: 100%;
    margin-bottom: 20px;
}
table{
    width: 100%;
    border-collapse: collapse;
    box-sizing: border-box;
    table-layout: fixed;
}
table tr{
    height: 52px;
    border-top: 0.5px solid #eee;
    box-sizing: border-box;
    word-wrap: break-word;

} 
table th{
    font-weight: 400;
    padding: 0 8px;
    text-align: center;
    box-sizing: border-box;

}
table td:first-child{
    width:35px;
}
.width-name{
    /* width:250px; */
}
/* table td:nth-child(3){
    width:120px;
} */
table td{
    color:#555;
    font-size: 15px;
    position: relative;
    padding: 0 8px;
    text-align: center;
    overflow-wrap: anywhere;
    box-sizing: border-box;

}
table .titleTr{
    height: 52px;
    padding-right:10px;
    box-sizing: content-box!important;
    background:rgba(246, 246, 246, 1);
}
table .title{
    position: relative;
}
table .title>div{
    position: absolute;
    top: 50%;
    left: 0px;
    transform: translatey(-50%);
}
table .title>span{
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translatey(-50%);
}
table .checkbox{
    display: inline-block;
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 1px solid #ddd;
    position: relative;
    top: 2px;
    background: #fff;
}
table .checkbox img{
    width: 11px;
    height: 11px;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}
table .activeAll{
    background:rgba(255, 218, 59, 1) ;
}
table .activeOne{
    background:rgb(184, 184, 184) ;
}
table .add{
    width: 32px;
    position: absolute;
    top: 50%;
    right: 20px;
    transform: translatey(-50%);
}
</style>
<style scoped>
/* 商品图片 */
.publish-image .image-content{
    display: flex;
}
.publish-image .image-content .imgBox{
    width: 136px;
    height: 136px;
    background-image: url('../assets/img/index/add.png');
    background-size: 100% 100%;
    border: 1px dashed #333;
}
.publish-image .image-content .imgList{
    background:#fff;
    margin-left: 10px;
}
/* 是否上架 */
.publish-shelves{
    display: flex;
}
.isshelves,.timeshelves{
    width: 220px;
    height: 180px;
    position: relative;
}
.isshelves-bottom{
    display: flex;
    align-items: center;
    margin-top: 3px;
}
.isshelves-bottom>span{
    font-size: 18px;
    color: #333333;
    padding-left: 10px;
}
.timeshelves{
    margin-left: 30px;
}
.timeshelves>div,.isshelves>div{
    position: absolute;
}
/* 确定取消按钮 */
.publish-btn span{
    display: inline-block;
    width: 140px;
    height: 42px;
    line-height: 42px;
    text-align: center;
    border-radius: 3px;
    background: rgba(255, 218, 59, 1);
    border: 1px solid rgba(255, 218, 59, 1);
    margin-right: 20px;
}
.publish-btn span:last-child{
    width: 90px;
    color: #999;
    background: #fff;
    border: 1px solid #eee;
}
</style>
<style>
.el-switch__core{
    width: 70px!important;
    height: 32px!important;
    border-radius: 50px!important;
}
.el-switch__core:after {
    top: 2px!important;
    left: 2px!important;
    width: 26px!important;
    height: 26px!important;
}
.el-switch.is-checked .el-switch__core::after {
    margin-left: 38px!important;
}
/* 时间日期函数 */
.el-time-panel__content::after, .el-time-panel__content::before{
    margin-top: -8px!important;
}

/* 固定表格头 */
.publish table {
    /*设置相邻单元格的边框间的距离*/
    border-spacing: 0;
    /*表格设置合并边框模型*/
    border-collapse: collapse;
}
/*关键设置 tbody出现滚动条*/
.publish table tbody {
    display: block;
    height: 230px;
    overflow-y: scroll;
    /* border: .8px solid #eee; */
    border-top: 0;
}
.publish table thead,
.publish tbody tr {
    display: table;
    width: 100%;
    table-layout: fixed;
}
/*关键设置：滚动条默认宽度是16px 将thead的宽度减16px*/
.publish table thead {
    width: calc( 100% - 1em)
}

</style>